<style rel="styleesheet" lang="less">
  @media screen and (min-width: 829px) {
    #college {
      background-color: #F6F7FB;
      padding-bottom: 1.2rem;
      * {
        box-sizing: border-box;
      }
      .content {
        max-width: 1200px;
        margin: 0 auto;
        margin-bottom: 6rem;
      }
      .kind {
        margin-top: 3.5rem;
        margin-bottom: 4.57rem;
        height: 2.43rem;
        ul {
          position: relative;
        }
        ul li {
          float: left;
          font-size: 1.57rem;
          cursor: pointer;
          margin-right: 3.5rem;
          color: #565656
        }
        ul .active {
          color: #F37D0A;
        }
        ul li:last-child {
          margin-right: 0
        }
      }

      .list-box {
        clear: both;
      }
      .list {
        height: 19.29rem;
        position: relative;
        cursor: pointer;
      }
      .panel2n {
        float: right !important;
      }

      .panel {
        height: 100%;
        width: 50%;
        float: left;
        display: inline-block;
        img {
          width: 100%;
          height: 100%;
          display: block;
          padding:0
        }
      }
      .info {
        width: 50%;
        display: inline-block;
        float: right;
        padding: 2.79rem 4.29rem 3.14rem 5.71rem;
        height: 100%;
        background-color: #fff;
        .i-title {
          font-size: 1.43rem;
          
          color: rgba(51, 51, 51, 1);
        }
        .i-content {
          width: 100%;
          font-size: 1rem;
          color: #999;
          height: 7rem;
          margin-top: 1.29rem;
          overflow: hidden;
          display:-webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
        }
        .i-addr {
          margin-top: 1.3rem;
        }
        .i-addr,
        .i-time {
          color: #ccc;
          line-height: 1.5rem;
          span:nth-child(2) {
            color: #999999;
          }
        }
      }
      .type {
        position: absolute;
        width: 5.71rem;
        height: 5.71rem;
        left: calc(~"50% - 2.85rem");
        top: 6.79rem;
        text-align: center;
        line-height: 5.71rem;
        border-radius: 5.71rem;
        background-color: #fff;
        box-shadow: 0 0 0.86rem 1px rgba(0, 0, 0, 0.1) inset;
        font-size: 1.14rem;
        
        color: rgba(102, 102, 102, 1);
      }
    }

    #searchCom_mobile, .search-box-mobile {
      display: none;
    }

    #searchCom_pc {
      float: right;
      margin-top: 3.5rem;
      margin-bottom: 1rem;
      height: 2.43rem;
      position: relative;
      .searchBox {
        float: right;
        width: 20.71rem;
        height: 2.43rem;
        background: #FBFBFE;
        border: 1px solid #CCCCCC;
        border-radius: 1.14rem;
        padding-left: 15px;
      }
      .searchLogo {
        font-size: 1rem;
        cursor: pointer;
        position: absolute;
        right: 0.8rem;
        top: 0.8rem;
        color: #CCCCCC;
      }
    }

  }

  @media screen and (max-width: 829px) {
    #college {
      background-color: #F6F7FB;
      * {
        box-sizing: border-box;
      }
      .kind {
        font-size: 0.28rem;
        background-color: #FFFFFF;
        padding-left: 0.3rem;
        margin-bottom: 0.16rem;
        font-weight: bold;
        width: 83%;
        li {
          display: inline-block;
          margin-right: 0.5rem;
          color: #3E3A39;
          line-height: 1.05rem;
        }
        li:last-child {
          margin-right: 0
        }
        li.active {
          color: #FD9D40
        }
      }

      .list-box {
        clear: both;
      }
      .list {
        position: relative;
        font-size: 0.26rem;
        height: 3rem;
        background-color: #fff;
        margin-bottom: 0.16rem;
        padding: 0.35rem;
        padding-top: 0.95rem;
        .i-addr,
        .i-time {
          display: none
        }
        .i-title {
          position: absolute;
          font-size: 0.34rem;
          top: 0.3rem;
          left: 0;
          padding: 0 0.35rem;
          width: 100%;
          color: #1A1A1A;
        }
        .i-content {
          height: 1rem;
          overflow: hidden;
          padding-left: 0.35rem;
          color: #888888;
        }
        .type {
          position: absolute;
          right: 0.35rem;
          bottom: 0;
          width: 1.2rem;
          height: 0.55rem;
          line-height: 0.55rem;
          font-size: 0.24rem;
          text-align: center;
          /*background-color: #1DBDFD;*/
          color: #fff;
        }
        .panel img {
          /*max-width: 100%;*/
          /*max-height: 1.9rem;*/
          width: 100%;
          height: 1.9rem;
        }
      }
    }

    #searchCom_pc {
      display: none;
    }

    #searchCom_mobile {
      float: right;
      background-color: #FFFFFF;
      height: 1.05rem;
      line-height: 1.05rem;
      text-align: center;
      width: 17%;
      position: relative;
    }

    .search-box-mobile {
      transform: translateX(-825px);
      transition: all .3s linear;
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      height: 1.05rem;
      border-radius: 2px;
      background-color: #fff;
      input {
        width: 80%;
        display: inline-block;
        border-radius: 33px;
        height: 80%;
        margin-top: 1%;
        padding-left: 15px;
        font-size: .3rem;
        border: 1px solid #e2e2e5;
      }
    }

    .showTranslate {
      transform: translateX(0px);
    }

    .reduction, .sure {
      display: inline-block;
      width: 10%;
      height: 100%;
      text-align: center;
      font-size: 0.25rem;
      line-height: 1.05rem;
    }

    .reduction {
      float: left;
    }

    .sure {
      float: right;
    }

    .ing {
      background-color: #1DBDFD;
    }

    .over {
      background-color: #1a1a1a;
    }
  }

</style>
<template>
  <div id="college" class="college">
    <div class="content">
      <el-col :xs="20" :sm="14" :md="12" :lg="12" class="kind">
        <ul>
          <li :class="{'active':1==num}" @click="active(1)">全部</li>
          <li :class="{'active':2==num}" @click="active(2)">报名中</li>
          <li :class="{'active':3==num}" @click="active(3)">报名结束</li>
          <!--<li :class="{'active':4==num}" @click="active(4)">浣花事迹</li>-->
          <li>
            <router-link to="/indexWorkDynamicso?id=2">书院动态</router-link>
          </li>
        </ul>
      </el-col>
      <!--<search></search>-->
      <!--<div id="searchCom" class="search" :class="[showSearch?'show-search':'']" >-->
      <!--<div class="search-box">-->
      <!--<span class="reduction" @click="setSearch(false)" v-show="showSearch" >返回</span>-->
      <!--<input type="text" v-model="searchData" class="searchBox" @keyup.enter="searchTitle()">-->
      <!--<span class="icon-search searchLogo" @click="searchTitle()"></span>-->
      <!--<span class="searchLogo searchSure" v-show="showSearch">确定</span>-->
      <!--</div>-->
      <!--</div>-->

      <div id="searchCom_pc" class="search show-search">
        <div class="search-box">
          <input type="text" v-model="searchData" class="searchBox" @keyup.enter="searchTitle()">
          <span class="icon-search searchLogo" @click="searchTitle()"></span>
        </div>
      </div>

      <div id="searchCom_mobile">
        <span class="icon-search searchLogo" @click="openSearchBox"></span>
      </div>
      <div class="search-box-mobile" :class="{'showTranslate':showSearch}">
        <div class="reduction" @click='closeSearchBox'><span class="icon-return return"></span></div>
        <input type="text" v-model="searchData" class="searchBox" @keyup.enter="searchTitle()">
        <div class="sure" @click="searchTitle"><span class="icon-search search"></span></div>
      </div>

      <div class="slideBox">
        <div id="list-box" class="list-box">
          <div id="slideDown">
            <div id="slideDown1">
              <img src="../../static/img/load.gif" alt="">
              <p id="slideDownTips">松开刷新</p>
            </div>
          </div>
          <dd>
            <dl :id="'list'+key" class="list" @click="goActive(item)" v-for="(item,key) in college" :key="key">
              <el-col :xs="10" :sm="12" :md="12" :lg="12" class="panel" :class="[(key+1)%2==0?'panel2n':'']">
                <img v-bind:src="item.showImageUrl">
              </el-col>

              <el-col :xs="14" :sm="12" :md="12" :lg="12" class="info">
                <div class="i-title bw-nowrap">{{item.title}}</div>
                <div class="i-content">
                  {{item.abstract}}
                </div>
                <div class="i-addr">
                  <span>活动地点：</span>
                  <span>{{item.extendInfo | address}}</span>
                </div>
                <div class="i-time">
                  <span>活动时间：</span>
                  <span>{{item.extendInfo | timeStar}}~{{item.extendInfo | timeEnd}}</span>
                </div>
              </el-col>
              <div class="type ing" v-show="item.categoryCodeText== '报名中' ">{{item.categoryCodeText}}</div>
              <div class="type over" v-show="item.categoryCodeText!= '报名中' ">{{item.categoryCodeText}}</div>
              <!--<div class="type over" v-show="item.State!=1">已结束</div>-->
              <!--<div class="type ing" v-show="item.State==1">报名中</div>-->
            </dl>
            <dl v-show="college.length==0">
              <!--<null-page></null-page>-->
              <span style="color: #CCCCCC">无更多数据展示</span>
            </dl>
          </dd>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '../common/touchDown.css'
  import slideDown from '../common/touchDown.js'
  import nullPage from '../components/null.vue'
  import search from '../components/search.vue'

  export default {
    data() {
      return {
        searchData: '',
        num: 1,
        college: [],
        Address: '',
        slideDown: false,
        showSearch: false,
        requestData: {
          "Filter": [{
            "GroupName": "1",
            "FieldName": "PlatformType",
            "FieldValue": 0,
            "SqlOperator": 3,
            "IsQuery": true
          },
            {
              "GroupName": "2",
              "FieldName": "categoryType",
              "FieldValue": "Event",
              "SqlOperator": 3,
              "IsQuery": true
            }
          ],
          PageSize:5,
          PageIndex:1
        }
      }
    },
    props: ['rootInfo'],
    components: {nullPage, search},
    methods: {
      openSearchBox() {
        this.showSearch = true
      },
      closeSearchBox() {
        this.showSearch = false
      },
      // 下拉刷新
      setSlideDown() {
        var _self = this;
        if (_self.slideDown) return;
        _self.slideDown = true;
        let myBwSlideDown = new slideDown();
        myBwSlideDown.init("list-box", "y", 'list', 3, function (callback) {
          _self.slideDown = false;
          _self.college = []
          _self.getCollege();
//          callback();
          //this.getCollege()
        });
      },

      active(index) {
        this.num = index
        if (index == 1) {
          var resultIndex = this.sumSerachData("categoryCode");
          if (resultIndex > 0) {
            this.requestData.Filter.splice(resultIndex, 1);
          }
          this.getCollege();
        }
        if (index == 2) {
          var resultIndex = this.sumSerachData("categoryCode");
          if (resultIndex > 0) {
            this.requestData.Filter[resultIndex].FieldValue = 1;
          } else {
            this.requestData.Filter.push({
              "GroupName": "state",
              "FieldName": "categoryCode",
              "FieldValue": "1",
              "SqlOperator":4 ,
              "IsQuery": true
            })
          }
          this.getCollege();
        }
        if (index == 3) {
//          var resultIndex = this.sumSerachData("categoryCode");
//          if (resultIndex > 0) {
//            this.requestData.Filter[resultIndex].FieldValue = 2;
//          } else {
//            this.requestData.Filter.push({
//              "GroupName": "state",
//              "FieldName": "categoryCode",
//              "FieldValue": "1",
//              "SqlOperator": 5,
//              "IsQuery": true
//            })
//          }
//          this.getCollege();

          var querst= {
            "Filter": [{
              "GroupName": "1",
              "FieldName": "PlatformType",
              "FieldValue": 0,
              "SqlOperator": 4,
              "IsQuery": true
            },
              {
                "GroupName": "2",
                "FieldName": "categoryType",
                "FieldValue": "Event",
                "SqlOperator": 4,
                "IsQuery": true
              }
            ],
            PageSize: 5,
            PageIndex: 1
          }
          querst.Filter.push({
            "GroupName": "state",
            "FieldName": "categoryCode",
            "FieldValue": "3",
            "SqlOperator": 4,
            "IsQuery": true
          });
          querst.Filter.push({
            "GroupName": "state",
            "FieldName": "categoryCode",
            "FieldValue": "2",
            "SqlOperator": 4,
            "IsQuery": true
          });
          querst.Filter.push({
            "GroupName": "state",
            "FieldName": "categoryCode",
            "FieldValue": "4",
            "SqlOperator": 4,
            "IsQuery": true
          });
          var loading = this.$toast.showLoading();
          this.$service('/api/CMSMain/GetContentLists', 'post', querst).then((response) => {
            this.$toast.hideLoading(loading)

//          console.log(college)
            if (response.Data) {
              this.college = response.Data
//            this.college = response.Data.Items
//            console.log(response.Data)
              this.Address = response.Data.extendInfo
              this.$nextTick(this.setSlideDown)
            } else {
              this.college = []
            }
          }).catch(err => {
            this.$toast.hideLoading(loading)
          })

        }
      },
      goActive(item) {
        this.$router.push({path: '/collogeInfo', query: {contentId: item.contentId}})
      },
      getCollege() {
        var loading = this.$toast.showLoading();
        this.$service('/api/CMSMain/GetContentLists', 'post', this.requestData).then((response) => {
          this.$toast.hideLoading(loading)

//          console.log(college)
          if (response.Data) {
            this.college = response.Data
//            this.college = response.Data.Items
//            console.log(response.Data)
            this.Address = response.Data.extendInfo
            this.$nextTick(this.setSlideDown)
          } else {
            this.college = []
          }
        })
          .catch(err => {
            this.$toast.hideLoading(loading)
          })
      },
      searchTitle() {
        var resultIndex = this.sumSerachData("title");
        if (this.searchData.length < 1) {
          if (resultIndex > 0) {
            this.requestData.Filter.splice(resultIndex, 1);
            return;
          }
        } else {
          if (resultIndex >= 0) {
            this.requestData.Filter[resultIndex].FieldValue = this.searchData;
          } else {
            this.requestData.Filter.push({
              "GroupName": "xx",
              "FieldName": "title",
              "FieldValue": this.searchData,
              "SqlOperator": 0,
              "IsQuery": true
            })
          }
        }
        this.getCollege();
      },
      sumSerachData(name) {
        for (var i = 0; i < this.requestData.Filter.length; i++) {
          var item = this.requestData.Filter[i];
          if (item.FieldName == name) {
            return i
          }
        }
        return -1;
      }
    },
    mounted() {
      if (document.body.offsetWidth || window.screen.width < 829) {
        this.rootInfo.showFooter = false;
      } else {
        this.rootInfo.showFooter = true;
      }
//    this.rootInfo.showFooter=false;
      this.getCollege()
    },
    filters: {
      address(val) {
        if(!val)return'';
        var obj = JSON.parse(val)
        return obj.Address
      },
      timeStar(val) {
        if(!val)return'';
        var obj = JSON.parse(val)
        return obj.StartTime.replace('T',' ').substring(0,16)
      },
      timeEnd(val) {
        if(!val)return'';
        var obj = JSON.parse(val)
        return obj.EndTime.replace('T',' ').substring(0,16)
      },
    },
  }

</script>
